<template>
    <h1>工具下载</h1>
    <div class="tool-download-container">
        <div v-for="(tools, category) in groupedTools" :key="category" class="category-section">
            <h2 class="category-title">{{ category }}</h2>
            <div class="tools-grid">
                <div v-for="tool in tools" :key="tool.descriptionZh" class="tool-card" @click="handleDownload(tool.url)">
                    <div class="tool-content">
                        <h3 class="tool-name">{{ tool.nameZh }}</h3>
                        <p class="description-zh">{{ tool.descriptionZh }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Tools'
}
</script>

<script setup lang="ts">
import { computed } from 'vue'
import toolsData from '@/config/tools.json'


interface Tool {
    nameZh: string
    descriptionZh: string
    url: string
    category: string
}

const tools = toolsData as Tool[]

// 按分类分组工具
const groupedTools = computed(() => {
    return tools.reduce((groups: { [key: string]: Tool[] }, tool) => {
        const category = tool.category || '未分类'
        if (!groups[category]) {
            groups[category] = []
        }
        groups[category].push(tool)
        return groups
    }, {})
})

const handleDownload = (url: string) => {
    // 创建隐藏的a标签触发下载
    const link = document.createElement('a')
    link.href = url
    link.target = '_blank'
    link.rel = 'noopener noreferrer'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}
</script>

<style scoped>
.tool-download-container {
    /* max-width: auto; */
    margin: 0 auto;
    padding: 2rem;
}

.category-section {
    margin-bottom: 3rem;
}

.category-title {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #eee;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;

}

.tool-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tool-content {
    padding: 1.5rem;
}

.tool-name {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.tool-description-zh {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}
</style>
